<style lang="less" scoped>
    .bg_f{
        width: 100%;
        padding: 0.38rem 0.32rem;
        margin-top: 0.78rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        div{
            display: flex;
            justify-content: space-between;
            font-size: 0.28rem;

            color: #909090;
            &:last-child{
                margin-top: 0.38rem;
            }
            span:last-child{
                color: #222;
            }
        }
    }
</style>
<template>
    <div>
        <v-header :title="date.title">
            <div  slot="left" style="width:100%;height:100%;padding-top: 0.2rem;" @click.stop="backClick"><span class="backs_icon" style="display: block"></span></div>
        </v-header>
        <div class="main_allScroll" >
            <msg :title="date.text" :description="date.type==0?'':description" :buttons="buttons" :icon="icon"></msg>
        </div>
    </div>
</template>
<script>
    import { Msg, Divider, XButton } from 'vux'
    import { mapState} from 'vuex'
    export default {
        components: {
            Msg,
            Divider,
            XButton
        },
        data() {
            return {
                date:{
                    backUrl:"",
                    title:"充值成功",
                    goUrl:"",
                    text:"充值成功",
                    type:0,
                    s_title:"支付方式",
                    s_type:"支付宝",
                    s_t_title:'充值金额',
                    s_amount:"1",
                },
                description: '',
                buttons:[{type: 'primary',text: '完成',onClick:this.buttonClick.bind(this)}]
            };
        },
        activated:function () {
            this.date = this.$route.query
            this.getdata()

        },
        methods: {
            getdata () {
                this.description = `<div class='bg_f'><div><span>${this.date.s_title}</span><span>${this.date.s_type}</span></div><div><span>${this.date.s_t_title}</span><span>${this.date.s_amount}</span></div></div>`
            },
            backClick(){
                if(this.date.backUrl){
                    this.$router.replace({ path: this.date.backUrl });
                }else{
                    this.$router.goBack();
                }
            },
            buttonClick(){
                if(this.date.goUrl){
                    this.$router.replace({ path: this.date.goUrl });
                }else{
                    this.$router.goBack();
                }
            }
        },
        computed: mapState({interactive: state => state.interactive})
    }
</script>